<!-- 忘记操作密码 -->
<template>
	<view class="container">
		<view class="cut"></view>
		<view class="name">
			<text :animation="animationData1">手机号码</text>
			<input type="text" v-model="info.phone" disabled="true" />
		</view>
		<view class="idcard">
			<text :animation="animationData2">验证码</text>
			<input type="text" v-model="info.code" placeholder="验证码" />
			<text class="veri" :class="!isCheck ? 'yzmactive' : ''" @tap="isCheck && yzm()">获取验证码</text>
			<text class="ver" v-show="!isCheck">{{ time }}秒后可再次获取</text>
		</view>
		<view :class="active?'active':''" class="btn" @tap="active&&newok()">
			提交
		</view>
	</view>
</template>

<script>
	import {
		registerVerify,
		setPassword
	} from "@/api/user.js";
	export default {
		data() {
			return {
				info: {
					phone: "",
					code: "",
					step: 1,
					type: 2,
				},
				time: 60,
				isClick: true,
				active: false,
				isCheck: true,
				animationData1: {},
				animationData2: {}
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title:options.title
			})
			this.info.phone = uni.getStorageSync("userInfo").phone
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		methods: {
			blur() {
				if (this.info.phone && this.info.code) {
					this.active = true
				} else {
					this.active = false
				}
				if (this.info.phone) {
					this.animation.opacity(1).step()
					this.animationData1 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData1 = this.animation.export()
				}
				if (this.info.code) {
					this.animation.opacity(1).step()
					this.animationData2 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData2 = this.animation.export()
				}
			},
			newok() {
				let _self = this;
				if (_self.info.phone == "") {
					uni.showToast({
						icon: "none",
						title: "手机号码为空"
					});
					return false;
				}

				if (_self.info.code == "") {
					uni.showToast({
						icon: "none",
						title: "验证码为空"
					});
					return false;
				}
				let data = {
					label: '请输入新密码',
					type: 2,
					code: _self.info.code,
				}
				uni.showLoading({mask:true})
				setPassword(_self.info).then(res => {
					uni.hideLoading()
					uni.redirectTo({
						url: `/pages/center/accountSet/payPassword/payPassword?data=${ encodeURIComponent(JSON.stringify(data)) }`
					});
				});
			},
			yzm() {
				let _self = this;
				registerVerify({
						phone: _self.info.phone
					})
					.then(res => {
						uni.showToast({
							icon: "none",
							title: res.msg
						});
						_self.isCheck = false;
						_self.countdown();
					})
			},
			countdown() {
				let _self = this;
				if (_self.time == 0) {
					_self.isCheck = true;
					_self.time = 60;
				} else {
					_self.time--;
					setTimeout(_self.countdown, 1000);
				}
			}
		},
		watch: {
			info: {
				deep: true,
				handler(val, oldval) {
					let _self = this;
					_self.blur();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 60rpx;

		.cut {
			width: 750rpx;
			margin-left: -60rpx;
			height: 20rpx;
			background: rgba(238, 238, 238, 1);
		}

		.name {
			height: 40upx;
			margin-top: 90upx;
			position: relative;

			text {
				position: absolute;
				opacity: 0;
				top: -30upx;
				font-size: 24upx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			input {
				border-bottom: 1upx solid rgba(220, 220, 220, 1);
				padding: 10upx 0;
			}
		}

		.idcard {
			height: 40upx;
			margin-top: 90upx;
			position: relative;

			text:nth-of-type(1) {
				position: absolute;
				opacity: 0;
				top: -30upx;
				font-size: 24upx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			input {
				border-bottom: 1upx solid rgba(220, 220, 220, 1);
				padding: 10upx 0;
			}

			.veri {
				position: absolute;
				right: 0upx;
				top: 18upx;
				font-size: 24upx;
				font-weight: bold;
				color: $theme-color;
				z-index: 9;
			}

			.yzmactive {
				color: #999 !important;
			}

			.ver {
				text-align: right;
				font-size: 24upx;
				color: #999999;
				position: absolute;
				right: 0;
				bottom: 40upx;
			}
		}

		.btn {
			position: absolute;
			bottom: 60rpx;
			left: 60rpx;
			width: 630rpx;
			height: 80upx;
			color: #fff;
			background: rgba(220, 220, 220, 1);
			border-radius: 40upx;
			text-align: center;
			line-height: 80upx;
			color: #ffffff;
		}

		.active {
			background: $theme-color;
		}
	}
</style>
